<template>
    <div id="app-container">
      <div class="header">
        <div class="header-left">仁医</div>
        <div class="header-input"><span class="iconfont">&#xe632;</span><input type="text" class="search" placeholder="东阿阿胶"></div>
       <div class="header-right"> 登录 </div>
     </div>
     <div class="d1"></div>
     <mt-swipe :auto="5000">
     <mt-swipe-item v-for="item in list" :key="item.id">
      <img :src="item.img_url" alt="">
      </mt-swipe-item>
      </mt-swipe>
      <div class="pingdao"><img src="http://127.0.0.1:3000/img/pingdao.png" alt=""></div>
     <div class="item">
         <div class="naxing"><router-link to="/home/nanxing"><img src="http://127.0.0.1:3000/img/nanxing.png" alt=""></router-link></div>
          <div class="nvxing"><router-link to="/home/nvxing"><img src="http://127.0.0.1:3000/img/nvxing.jpg" alt=""></router-link></div>
    </div>
    <div class="item">
       <div class="shenjing"><router-link to="/home/shenjing"><img src="http://127.0.0.1:3000/img/shenjing.jpg" alt=""></router-link></div>
       <div class="xinnao"><router-link to="/home/xinnao"><img src="http://127.0.0.1:3000/img/xinnao.jpg" alt=""></router-link></div>
    </div>
    <div class="item1">
       <div class="shenjing"><img src="http://127.0.0.1:3000/img/ganbing.jpg" alt=""></div>
       <div class="xinnao"><img src="http://127.0.0.1:3000/img/pifu.jpg" alt=""></div>
       <div class="huxi"><img src="http://127.0.0.1:3000/img/huxi.jpg" alt=""></div>
       <div class="changwei"><img src="http://127.0.0.1:3000/img/changwei.jpg" alt=""></div>
    </div>
    <div class="item1">
       <div class="fengshi"><img src="http://127.0.0.1:3000/img/fengshi.jpg" alt=""></div>
       <div class="zhongliu"><img src="http://127.0.0.1:3000/img/zhongliu.jpg" alt=""></div>
       <div class="tangniaobing"><img src="http://127.0.0.1:3000/img/tangniubing.jpg" alt=""></div>
       <div class="jiachang"><img src="http://127.0.0.1:3000/img/jiachang.jpg" alt=""></div>
    </div>
    <div class="item2"></div>
     <nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" >
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			
            <a class="mui-tab-item" >
				<span class="mui-icon mui-icon-extra mui-icon-extra-order"></span>
				<span class="mui-tab-label">头条</span>
			</a>
			<a class="mui-tab-item " @click="getCart()"  >
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge" id="bid">{{$store.getters.getAllCount}}</span></span>
               
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" >
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
    </div>
</template>
<script>
    export default{
        data(){return{
           list:[]
        }},
       methods:{
           getImage(){
              var  url="http://127.0.0.1:3000/imagelist";
              this.$http.get(url).then(result=>{
              this.list=result.body;
               
           });
          },
           getCart(){
               this.$router.push("/home/cart")
           }
        },
       created(){
       this.getImage();
          }
    }
</script>
<style>
body{
    margin: 0;
    padding: 0;
}
   #app-container{
      height: 100%;
      background: rgb(248, 244, 244);
      }
  
  .header{
      position: fixed;
      z-index: 10;
      display: flex;
       height: 50px;
       width: 100%;
       font-size: 14px;
       background: #24c3d8;
       color: #fff;
  }
  div.d1{
      height: 50px;
      color: #fff;
  }
  
  .header-left{
      width:25%;
       float: left; 
       font-size: 26px;
         line-height: 50px; 
        FONT-FAMILY: "华文行楷";
        margin-left: 5px;
  }
  .header-input{
      
      line-height: 50px;
      color: darkgrey; 
      margin-top:5px;
       width:100%;
       height: 40px;
       margin-left: 20px;
       margin-right: 10px;
       border-radius: 20px; 
       border: 1px solid #ccc;;
  }
  .header-input span{
      font-size: 18px;
  }
  .header-right{
      position: relative;
      
      width: 20%;
     color: #fff;
      line-height: 50px;
      font-size: 16px;
      text-align: center;
      
  }
  .header-right .login{
      color: #fff;
  }
 
  .header-input .search{
      position: relative;
      background:transparent;
      border:0;
      top: -8px;
      left: 10px;
      width: 180px;
      height: 40px;
     
  }
  .header-input span{
    color: black;
    position:relative;
    top:-5px;
    left: 5px;
  }
  div.mint-swipe{
      height: 170px;
  }
  div.mint-swipe  img{
      height: 170px;
  }
  .pingdao img{
      width: 100%;
  }
  .item{
      display: flex;
       flex-wrap:nowrap;
       justify-content: space-between;
       /* padding: 5px; */
     }
.item img{
    width: 100%;
}
  .item1{
      display: flex;
       flex-wrap:nowrap;
       justify-content: space-between;
       }
  .item1 img{
      width: 100%;
  }     
.item2{
    height: 50px;
    background: #fff;

       }
    .item1 div{
        /* border: 1px solid red; */
        border-radius: 5px;
        overflow: hidden;
        margin: 5px;
    }   
  .item div{
        border-radius: 5px;
        height: 120px;
        overflow: hidden;
        margin: 5px;
     
  }
  .item div{
        border-radius: 5px;
        overflow: hidden;
        margin: 5px;
     
  }
</style>

